// 监控区域模块制作
; (function () {
    $(".monitor .tabs").on("click", "a", function () {
        $(this)
            .addClass("active")
            .siblings("a")
            .removeClass("active");

        // console.log($(this).index());
        //   选取对应索引号的content
        $(".monitor .content")
            .eq($(this).index())
            .show()
            .siblings(".content")
            .hide();
    });
    // 1. 先克隆marquee里面所有的行（row）
    $(".marquee-view .marquee").each(function () {
        // console.log($(this));
        var rows = $(this)
            .children()
            .clone();
        $(this).append(rows);
    });
})();


// 点位分布统计模块
; (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie"));
    // 2. 指定配置项和数据
    option = {
        // 提示框组件
        tooltip: {
            // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表series系列图表名称  
            // b 代表series数据名称 data 里面的name    
            // c 代表series数据值 data 里面的value   
            // d代表  当前数据/总数据的比例
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 控制图表
        series: [
            {
                // 图表名称
                name: '点位统计',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 饼形图的内圈半径和外圈半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
                radius: ['10%', '70%'],
                // 图表中心位置 left 50%  top 50%  距离图表DOM容器
                center: ['50%', '50%'],
                // radius 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                label: {
                    fontSize: 10
                },
                labelLine: {
                    length: 6,
                    length2: 8
                }
            }
        ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);

    // 监听浏览器缩放，图表对象调用缩放resize函数
    // 浏览器缩放时,图表跟着缩放
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

(function () {
    var myChart = echarts.init(document.querySelector('.bar'))
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        },
    }

    var option = {
        tooltip: {
            trigger: 'item',
        },
        // 修改线性渐变色方式 1
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
                { offset: 0, color: '#00fffb' }, // 0 起始颜色
                { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
        ),
        grid: {
            top: '4%',
            left: '1%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            show: true
        },

        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                // 刻度设置
                axisTick: {
                    // true意思：图形和刻度居中中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    // 不显示刻度
                    show: false
                },
                // x坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd'
                },
                // x坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    }
                }
            }
        ],
        yAxis: [
            {
                // 使用类目，必须有data属性
                type: 'value',
                // 使用 data 中的数据设为刻度文字
                data: ['0', '500', '1000', '1500', '2000', '2500'],
                // 刻度设置
                axisTick: {
                    // 不显示刻度
                    show: false
                },
                // y坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd'
                },
                // y坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    }
                },
                // y轴 分割线的样式 
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                }
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
            }
        ]
    };
    myChart.setOption(option);
})(),


    // 销售统计模块
    (function () {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".line"));

        var data = {
            year: [
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ],
            quarter: [
                [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
                [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
            ],
            month: [
                [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
                [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
            ],
            week: [
                [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
                [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
            ]
        }
        // 2. 指定配置和数据
        var option = {
            tooltip: {
                trigger: "axis"
            },
            // 图例组件
            legend: {
                textStyle: {
                    color: '#4c9bfd' // 图例文字颜色
                },
                right: '10%' // 距离右边10%
            },
            grid: {
                top: '20%',
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true,
                borderColor: '#012f4a',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisTick: {
                    show: false // 去除刻度线
                },
                axisLabel: {
                    color: '#4c9bfd' // 文本颜色
                },
                axisLine: {
                    show: false // 去除轴线
                },
                boundaryGap: false  // 去除轴内间距
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false  // 去除刻度
                },
                axisLabel: {
                    color: '#4c9bfd' // 文字颜色
                },
                splitLine: {
                    lineStyle: {
                        color: '#012f4a' // 分割线颜色
                    }
                }
            },
            color: ['#00f2f1', '#ed3f35'],
            // 图标数据
            series: [{
                name: '预期销售额',
                data: data.year[0],
                type: 'line',
                smooth: true
            }, {
                name: '实际销售额',
                data: data.year[1],
                type: 'line',
                smooth: true
            }
            ]
        };

        // 3. 把配置和数据给实例对象
        myChart.setOption(option);

        $('.sales').on('click', '.caption a', function () {
            // 高亮显示
            $(this).addClass('active').siblings('a').removeClass('active')
            // 获取点击的a的 data-type属性
            var type = $(this).attr('data-type')
            var currData = data[type]
            // 将a的data-type属性与data数组里的数据匹配
            option.series[0].data = currData[0]
            option.series[1].data = currData[1]
            // 重新渲染界面
            myChart.setOption(option);
        })

        var as = $('.caption a')
        var index = 0;
        var timer = setInterval(function () {
            index++
            if (index >= 4) {
                index = 0
            }
            as.eq(index).click()
        }, 1000)
        $('.caption a').hover(function () {
            clearInterval(timer)
        }, function () {
            timer = setInterval(function () {
                index++
                if (index >= 4) {
                    index = 0
                }
                as.eq(index).click()
            }, 1000)
        })
    })();

// 渠道 季度 板块
// 销售渠道模块 雷达图
(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".radar"));
    // 2.指定配置

    var option = {
        tooltip: {
            show: true,
            // 控制提示框组件的显示位置
            position: ["30%", "3%"]
        },
        radar: {
            indicator: [
                { name: "机场", max: 100 },
                { name: "商场", max: 100 },
                { name: "火车站", max: 100 },
                { name: "汽车站", max: 100 },
                { name: "地铁", max: 100 }
            ],
            // 修改雷达图的大小
            radius: "50%",
            shape: "circle",
            // 分割的圆圈个数
            splitNumber: 4,
            name: {
                // 修饰雷达图文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
            },
            // 分割的圆圈线条的样式
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255, 0.5)"
                }
            },
            splitArea: {
                show: false
            },
            // 坐标轴的线修改为白色半透明
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.5)"
                }
            }
        },
        series: [
            {
                name: "北京",
                type: "radar",
                // 填充区域的线条颜色
                lineStyle: {
                    normal: {
                        color: "#fff",
                        width: 1,
                        opacity: 0.5
                    }
                },
                data: [[90, 19, 56, 11, 34]],
                // 设置图形标记 （拐点）
                symbol: "circle",
                // 这个是设置小圆点大小
                symbolSize: 5,
                // 设置小圆点颜色
                itemStyle: {
                    color: "#fff"
                },
                // 让小圆点显示数据
                label: {
                    show: true,
                    fontSize: 10
                },
                // 修饰我们区域填充的背景颜色
                areaStyle: {
                    color: "rgba(238, 197, 102, 0.6)"
                }
            }
        ]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

// 销售模块 饼形图 半圆形 设置方式
(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
        series: [
            {
                type: 'pie',
                // 放大图形
                radius: ['110%', '130%'],
                // 移动下位置  套住50%文字
                center: ['48%', '80%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                // 起始角度，支持范围[0, 360]
                startAngle: 180,
                hoverOffset: 0,
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            // 颜色渐变#00c9e0->#005fc1
                            color: new echarts.graphic.LinearGradient(
                                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                                    { offset: 1, color: "#005fc1" } // 1 结束颜色
                                ]
                            )
                        }
                    },  // 不需要名称
                    { value: 100, itemStyle: { color: '#12274d' } }, // 不需要名称
                    { value: 200, itemStyle: { color: 'transparent' } }, // 透明隐藏第三块区域
                ]
            }
        ]
    }
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);


    var hotData = [
        {
            city: '北京',  // 城市
            sales: '25, 179',  // 销售额
            flag: true, //  上升还是下降
            brands: [   //  品牌种类数据
                { name: '可爱多', num: '9,086', flag: true },
                { name: '娃哈哈', num: '8,341', flag: true },
                { name: '喜之郎', num: '7,407', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '6,724', flag: false },
                { name: '好多鱼', num: '2,170', flag: true },
            ]
        },
        {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '3,457', flag: false },
                { name: '娃哈哈', num: '2,124', flag: true },
                { name: '喜之郎', num: '8,907', flag: false },
                { name: '八喜', num: '6,080', flag: true },
                { name: '小洋人', num: '1,724', flag: false },
                { name: '好多鱼', num: '1,170', flag: false },
            ]
        },
        {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '2,345', flag: true },
                { name: '娃哈哈', num: '7,109', flag: true },
                { name: '喜之郎', num: '3,701', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '2,724', flag: false },
                { name: '好多鱼', num: '2,998', flag: true },
            ]
        },
        {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '2,156', flag: false },
                { name: '娃哈哈', num: '2,456', flag: true },
                { name: '喜之郎', num: '9,737', flag: true },
                { name: '八喜', num: '2,080', flag: true },
                { name: '小洋人', num: '8,724', flag: true },
                { name: '好多鱼', num: '1,770', flag: false },
            ]
        },
        {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '9,567', flag: true },
                { name: '娃哈哈', num: '2,345', flag: false },
                { name: '喜之郎', num: '9,037', flag: false },
                { name: '八喜', num: '1,080', flag: true },
                { name: '小洋人', num: '4,724', flag: false },
                { name: '好多鱼', num: '9,999', flag: true },
            ]
        }
    ]
    var arr = [];  //创建一个空数组
    $.each(hotData, function (index, item) { //遍历hotData数组
        arr.push(   // 把hotData里的数据传输给arr数组
            `<li>
          <span>${item.city}</span>
          <span>${item.sales}<s class='${item.flag ? "icon-up" : "icon-down"}'></s></span>
          </li>`)                                   // 在``里只有变量可以不加''号或""
    })
    $('.sup').html(arr.join(''))
    //  将arr数组分隔为字符型 添加给ul

    $('.province .sup').on('mouseenter', 'li', function () {
        render($(this))
    })

    function render(that) {
        // 高亮显示
        that.addClass('active').siblings().removeClass()
        //   console.log(hotData[$(this).index()].brands[$(this).index()].name);
        // 通过li的索引号 找到hotData数组中对应的brands对象
        var data = hotData[that.index()].brands;
        // 创建一个新的数组 存储字符数据
        var arr = [];
        // 遍历brands对象 给arr数组添加内容
        $.each(data, function (index, item) {
            arr.push(`
                            <li>
                            <span>${item.name}</span>
                            <span>${item.num}<s class="${item.flag ? 'icon-up' : 'icon-down'}"></s></span></li>
                            `)
            // 将arr数组分隔成字符形式添加给ul
            $('.sub').html(arr.join(''))
        })
    }

    // arr.push(`
    //        <li>
    //        <span>${data.name}</span>
    //        <span>${data.num}<s class='${data.flag ? "icon-up" : "icon-down"}'></s></span>
    //        </li>
    //        `)
    // $('.sub').html(arr.join(''))
  // web api 方法来绑定事件
  var lis = document.querySelectorAll('.province .sup li')
  // 如何将dom转换为jQuery对象    $(dom对象)
  // 将jquery对象转换为Dom对象  jQuery[下标] 或者  jQuery.get(下标)
  for (var i = 0; i < lis.length; i++) {
    lis[i].onmouseenter = function () {
      index = $(this).index()
      // 将当前鼠标经过的这个元素设置高亮效果 同时将其它的兄弟身上的高亮效果清空
      $(this).addClass('active').siblings().removeClass()
      var currentData = hotData[index].brands
      // 将这个数组里面数据渲染到右侧 sub

      var arr = []
      for (var i = 0; i < currentData.length; i++) {
        arr.push(
          `<li>
            <span>${currentData[i].name}</span>
            <span>${currentData[i].num} <s class="${
            currentData[i].flag ? 'icon-up' : 'icon-down'
          }"></s></span>
          </li>`
        )
      }
      // 将数组转换为字符串后 添加到 .sup里面
      $('.sub').html(arr.join(''))
    }
  }


    // 所有的LI
    var $lis = $('.province .sup li')
    // 第一个默认激活
    $lis.eq(0).mouseenter()

    // 创建一个变量 控制$lis的索引号
    var index = 0;
    // 创建定时器
    var timer = setInterval(function () {
        index++;
        // 判断领界条件
        if (index >= hotData.length) {
            index = 0
        }
        // 每过两秒给这个li
        render($lis.eq(index))
    }, 2000)

    // 创建一个hover事件 来控制和清除定时器
    $lis.hover(function () {
        clearInterval(timer)
    }, function () {
        // 当鼠标离开时启动定时器
        clearInterval(timer)
        timer = setInterval(function () {
            index++;
            if (index >= hotData.length) {
                index = 0
            }
            render($lis.eq(index))
        }, 2000)
    })
})();